/* 审核管理 */
<template>
  <div class="examine labBox">
    <comTitle class="flex">
      <template #title> 审核列表 </template>
    </comTitle>
    <div class="table">
      <div class="flex-common tableComonTop">
        <div class="option mr-16" v-if="applyOptions.length > 0">
          <selectName
            :valueKey="'id'"
            :keys="'id'"
            :label="'name'"
            :value="formData.applyType"
            :selectArr="applyOptions"
            :title="true"
            @dropDown="(val) => (formData.applyType = val)"
          >
            <div class="fs-16 cr-hui3">申请类型：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="roleOptions.length > 0">
          <selectName
            :selectArr="roleOptions"
            :title="true"
            :value="formData.applyRole"
            :valueKey="'id'"
            :keys="'id'"
            :label="'name'"
            @dropDown="(val) => (formData.applyRole = val)"
          >
            <div class="fs-16 cr-hui3">申请角色：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="statusOptions.length > 0">
          <selectName
            :valueKey="'id'"
            :keys="'name'"
            :label="'name'"
            :value="formData.applyStatus"
            :selectArr="statusOptions"
            :title="true"
            @dropDown="(val) => (formData.applyStatus = val)"
          >
            <div class="fs-16 cr-hui3">状态：</div>
          </selectName>
        </div>
        <div class="time">
          <Time
            :type="'datetimerange'"
            :title="true"
            :value="tableTimeValue"
            @valueChange="(event) => (tableTimeValue = event)"
          ></Time>
        </div>
        <!-- <div class="submit" @click="submit">确定</div> -->
      </div>
      <scroll :height="80">
        <mergeTable :tableData="tableList" :tableConfig="config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="申请类型" slot="applyType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getApplyType(row.applyType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请角色" slot="applyRole">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getRoleType(row.applyRole)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" slot="applyStatus">
            <template slot-scope="{ row }">
              <span
                v-if="row.applyStatus === 1 || row.applyStatus === 3"
                class="fs-12 cursor"
                :style="{
                  color: tableCommonMethod.getStatusColor(row.applyStatus),
                }"
                @click="statusHander(row)"
                >{{ tableCommonMethod.getStatusType(row.applyStatus) }}</span
              >
              <span
                v-else
                class="fs-12"
                :style="{
                  color: tableCommonMethod.getStatusColor(row.applyStatus),
                }"
                >{{ tableCommonMethod.getStatusType(row.applyStatus) }}</span
              >
            </template>
          </el-table-column>
        </mergeTable>
      </scroll>

      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </div>
    <!-- 待审核弹窗 -->
    <el-dialog
      :visible.sync="wait.waitVisible"
      append-to-body
      custom-class="waitDialog"
      width="34%"
      @close="
        () => {
          wait.waitVisible = false;
        }
      "
    >
      <comTitle slot="title">
        <template #title>
          <span class="fs-24 mr-16">审核结果</span>
        </template>
      </comTitle>
      <el-form :model="wait" size="mini" label-width="90px">
        <el-row>
          <el-form-item label="审核意见：">
            <el-select
              v-model="wait.applyStatus"
              placeholder="请选择审核意见"
              style="width: 80%"
            >
              <el-option
                v-for="station in wait.options"
                :key="station.id"
                :label="station.name"
                :value="station.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="驳回理由：" v-if="wait.applyStatus === 3">
            <el-input
              type="textarea"
              v-model="wait.reason"
              :autosize="{ minRows: 10, maxRows: 12 }"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：" v-if="wait.applyStatus === 2">
            <el-input
              type="textarea"
              v-model="wait.remark"
              :autosize="{ minRows: 10, maxRows: 12 }"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row> </el-row>
      </el-form>
      <div class="waitButton" @click="waitSubmit">
        <span>提交</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { laboratoryExamineConfig } from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import { consumablesReviewaudit, consumablesReview } from "@/http/api";
export default {
  name: "examine",
  data() {
    return {
      wait: {
        waitVisible: false,
        applyStatus: null,
        reason: "",
        remark: "",
        id: "",
        options: [
          {
            name: "审核通过",
            id: 2,
          },
          {
            name: "审核驳回",
            id: 3,
          },
        ],
      },
      formData: {
        applyType: null,
        applyRole: null,
        applyStatus: null,
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableCommonMethod: tableCommonMethod,
      // 申请类型 1:领用耗材2:使用设备3:使用实验室
      applyOptions: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 1,
          name: "领用耗材",
        },
        {
          id: 2,
          name: "使用设备",
        },
        {
          id: 3,
          name: "使用实验室",
        },
      ],
      // 申请角色 1:学生2:老师3:管理员
      roleOptions: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 1,
          name: "学生",
        },
        {
          id: 2,
          name: "老师",
        },
        {
          id: 3,
          name: "管理员",
        },
      ],

      statusOptions: [
        {
          id: 1,
          name: "待审核",
        },
        {
          id: 2,
          name: "审核通过",
        },
        {
          id: 3,
          name: "审核驳回",
        },
      ],
      total: 0,
      tableList: [],
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
      config: laboratoryExamineConfig,
    };
  },
  mounted() {
    this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.initconsumablesReview();
  },
  methods: {
    // 审核列表
    async initconsumablesReview() {
      let params = {
        applyStatus: this.formData.applyStatus,
        applyRole: this.formData.applyRole,
        applyType: this.formData.applyType,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
        pageSize: this.formData.pageSize,
        pageNum: this.formData.pageNum,
      };
      let res = await consumablesReview(params);
      if (res.code === 20000 && res.data !== null) {
        this.total = res.data.total;
        this.tableList = res.data.rows;
      }
    },
    /* 确定按钮 */
    onPage(val) {
      this.formData.pageSize = val;
      this.initconsumablesReview();
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initconsumablesReview();
    },

    //弹起待审核
    statusHander(row) {
      if (row.applyStatus === 3) {
        this.$alert(row.reason, "驳回理由", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      }
      if (row.applyStatus === 1) {
        this.wait.waitVisible = true;
        this.wait.id = row.id;
      }
    },
    // 待审核提交
    async waitSubmit() {
      let params = {
        id: this.wait.id,
        reason: this.wait.reason,
        remark: this.wait.remark,
        applyStatus: this.wait.applyStatus,
      };
      let res = await consumablesReviewaudit(params);
      if (res.code === 20000) {
        this.wait.waitVisible = false;
        this.wait.reason = "";
        this.wait.remark = "";
        this.wait.applyStatus = null;
        this.initconsumablesReview();
        this.$notify({
          message: res.message,
          duration: 1000,
        });
      }
    },
  },

  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initconsumablesReview();
      },
      deep: true,
    },
    "formData.applyType": {
      handler(val) {
        this.initconsumablesReview();
      },
      deep: true,
    },
    "formData.applyStatus": {
      handler(val) {
        this.initconsumablesReview();
      },
      deep: true,
    },
    "formData.applyRole": {
      handler(val) {
        this.initconsumablesReview();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.examine {
  padding: 0px 24px;
  height: 100% !important;
  .table {
    height: 95%;
    overflow: hidden;
  }
}
.bottom-wrap {
  left: 48px !important;
  right: 48px !important;
  position: absolute;
  bottom: 20px;
}
.tableComonTop {
  height: 64px;
  .submit {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .input {
    height: 24px;
    line-height: 24px;
    margin-right: 20px;
    /deep/.el-input__inner {
      height: inherit !important;
      line-height: inherit !important;
    }
  }
}
</style>
<style lang="scss">
.el-dialog.waitDialog {
  height: 450px !important;
  .el-dialog__close {
    top: auto !important;
  }
  .commonTitle .title {
    height: 60px !important;
  }
  .el-dialog__header {
    // padding: 10px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
  }
  .el-date-editor .el-range__icon {
    line-height: 34px !important;
  }
  .el-dialog__body {
    // background: none !important;
  }
  .el-textarea {
    width: 80% !important;
  }
  .el-range-separator {
    line-height: 30px !important;
  }
  .waitButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      color: #00bfb1;
      line-height: 28px;
      cursor: pointer;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>